<template>
  <div class="template">
    <div class="primary-school">
      <div class="heading">
        <RouterLink v-for="item in pathArr" :key="item.id" :to="item.path" @click="selectTitle(item.id)"
        class="head" :class="{'head-active': selectedId === item.id}">
          {{ item.name }}
        </RouterLink>
      </div>
      <div class="search-bar">
        <div class="icon"></div>
        <div class="search-func">
          <div class="search">
            <input
              v-model="searchInput"
              placeholder="搜 索 模 板 关 键 词"
              placeholder-class="input-placeholder"
              @input=""
              class="search-input"
            />
          </div>
          <div class="search-icon"></div>
        </div>
      </div>
      <div>
        <RouterView></RouterView>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
let selectedId = ref(1)
let searchInput = ref('')
const pathArr = [
  {
    id: 1,
    name: '依据年级',
    path: '/design-template/grade'
  },
  {
    id: 2,
    name: '依据学科',
    path: '/design-template/subject'
  },
  {
    id: 3,
    name: '依据教学目的',
    path: '/design-template/target'
  },
  {
    id: 4,
    name: '常用模板',
    path: '/design-template/common'
  }
]
function selectTitle(id: number){
  selectedId.value = id
}
</script>

<style scoped lang="less">
@import url('@/views/design-template/index.less');
.search-input::placeholder {
    color: rgb(182, 174, 255); 
    opacity: 1; 
}
</style>